<!-- 个人中心 -->
<template>
	<view class="components-theme">

		<!-- 顶部背景 -->
		<!-- margin-top:' + CustomBar + 'px;' -->
		<view class='UCenter-bg' :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');'">
			<view class='space' v-show="spaceShow">
				<view class="stars ">
					<view class="star "></view>
					<view class="star pink "></view>
					<view class="star blue "></view>
					<view class="star yellow "></view>
				</view>
			</view>
			<block>
				<view class='text-center'>
					<!--  -->
					<view class="cu-avatar xl round" :style="'background-image:url('+userInfo.cardDTO.avatar+')'"
						@click="handleEdit">
					</view>
					<view class="padding text-blue text-xl text-bold">
						你好，{{userInfo.cardDTO.realName}}
					</view>
				</view>
			</block>
			<image
				src='https://cdn.nlark.com/yuque/0/2019/gif/280373/1570670848649-assets/web-upload/3dbaa72a-062b-470f-9b9d-058ff8f85ab8.gif'
				mode='scaleToFill' class='gif-wave'></image>
		</view>

		<!-- 		<view class='padding flex text-center text-grey bg-white shadow-warp'>
			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xxl text-orange"> </view>
				<view class="margin-top-sm">
					<text></text> 客服微信
				</view>
			</view>
			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xxl text-blue"> </view>
				<view class="margin-top-sm">
					<text></text> 学校信息
				</view>
			</view>
			<view class='flex flex-sub flex-direction'>
				<view class="text-xxl text-red"> </view>
				<view class="margin-top-sm">
					<text></text> 使用帮助
				</view>
			</view>
		</view> -->

		<!-- 我的动态 -->
		<block v-if="trendList != null && trendList.length > 0">
			<view class="cu-card dynamic no-card margin-top">
				<view class="cu-item shadow padding-bottom" v-for="(item,index) in trendList" :key="index">
					<view class="cu-list menu">
						<view class="cu-item">
							<view class="content">
								<text class="text-grey text-df">{{item.createTime}}</text>
							</view>
							<view class="action" @click="moreAction(item)">
								<text class="cuIcon-moreandroid" />
							</view>
						</view>
					</view>
					<view class="text-content" @click="goDetail(item.id)">
						{{item.content}}
						<!-- <view class="cu-tag bg-blue tag-top">史诗</view> -->
					</view>
					<!-- style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"> -->
					<block v-if="item.mediaList && item.mediaList.length>0">
						<view class="grid flex-sub padding-lr"
							:class="item.mediaList.length>1?'col-3 grid-square':'col-1'">
							<view v-for="(mediaItem,mediaIndex) in item.mediaList" :key="mediaIndex" class="bg-img"
								:class="item.mediaList.length>1?'':'only-img'"
								:style="'background-image:url('+mediaItem.previewUrl+');'"
								@tap="ViewImage(item.mediaList,mediaIndex)" :data-url="mediaItem.previewUrl">
							</view>
						</view>
					</block>
					<view class="flex justify-between text-gray padding">
						<view class="text-left text-df">
						</view>
						<view class="text-right text-xl">
							<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> 10 -->
							<text class="cuIcon-appreciatefill margin-left-sm margin-right-xs"
								:class="item.hasPraise ? 'text-red':''" @click="onPraise(item.id,index)" />
							{{item.praiseCnt}}
							<text class="cuIcon-messagefill margin-left-sm margin-right-xs"
								@click="goDetail(item.id)" />
							{{item.commentCnt}}
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</block>
		<block v-else>
			<view class="padding-xs align-center">
				<view class="flex-sub text-center padding-top-xl">
					<view class="solid-bottom text-xsl padding">
						<text class="cuIcon-new"></text>
					</view>
					<view class="padding text-grey">快来发布你的第一条动态吧</view>
				</view>
			</view>
		</block>

		<!-- <s-footer></s-footer> -->
		<!-- 弹窗确认 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog" style="padding: 300rpx 0 70rpx;">
				<view class="modal_bg"></view>
				<view class="modal_main">
					<view class='nav-list margin-top'>
						<view :class="'nav-li bg-zt' + (index+1)" v-for="(item, index) in inter" :key="index"
							@click="switchImage(index,item.name)">
							<view class="nav-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 动态操作 -->
		<view class="cu-modal bottom-modal" :class="optionModal?'show':''" @tap="hideAction">
			<view class="cu-dialog bg-white trend-action" style="border-radius: 20">
				<view class="padding text-center text-df" style="border-top-left-radius: 20;">
					更多操作
				</view>
				<view class="padding-tb">
					<view class="cu-list grid col-3 no-border">
						<view class="cu-item">
							<view class="cuIcon-top"></view>
							<text>置顶</text>
						</view>
						<view class="cu-item" @click="onDelete">
							<view class="cuIcon-delete"></view>
							<text>删除</text>
						</view>
						<view class="cu-item">
							<view class="cuIcon-forward"></view>
							<text>分享</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		trend_myself,
		account_info
	} from '@/common/api/api.js';
	import {
		trend_delete
	} from '@/common/api/sns.js';

	export default {
		data() {
			return {
				userInfo: {
					cardDTO: {
						name: ""
					}
				},
				actionTrend: {},
				loadStatus: 'more',
				trendList: [],
				params: {
					pageNo: 1,
					pageSize: 10
				},
				optionModal: false,
				spaceShow: true,
				modalName: null,
				picName: '流星之夜',
				pic: [{
					link: 'https://cdn.zhoukaiwen.com/zjx_me_bg1.jpeg',
					name: '春天'
				}, {
					link: 'https://cdn.zhoukaiwen.com/zjx_me_bg2.jpeg',
					name: '夏天'
				}, {
					link: 'https://cdn.zhoukaiwen.com/zjx_me_bg3.jpeg',
					name: '秋天'
				}, {
					link: 'https://cdn.zhoukaiwen.com/zjx_me_bg4.jpeg',
					name: '冬天'
				}, {
					link: 'https://cdn.zhoukaiwen.com/zjx_me_bg5.jpeg',
					name: '幽静'
				}, {
					link: 'https://cdn.zhoukaiwen.com/zjx_me_bg6.jpg',
					name: '天空'
				}],
				topBackGroupImageIndex: 5,
				inter: [{
					title: 'mimicry',
					name: '活力春天',
					color: ''
				}, {
					title: 'theme',
					name: '清爽夏日',
					color: ''
				}, {
					title: 'theme',
					name: '金秋之韵',
					color: ''
				}, {
					title: 'theme',
					name: '冬日之阳',
					color: ''
				}, {
					title: 'theme',
					name: '幽兰星空',
					color: ''
				}, {
					title: 'theme',
					name: '流星之夜',
					color: ''
				}]
			}
		},
		// 分享小程序
		// onShareAppMessage(res) {
		// 	return {
		// 		title: '看看这个小程序多好玩～',
		// 	};
		// },
		watch: {
			topBackGroupImageIndex(val) {
				console.log(val)
				if (val == 4 || val == 5) {
					this.spaceShow = true;
				} else {
					this.spaceShow = false;
				}
			}
		},
		onLoad(e) {
			// this.userInfo.uid = e.uid
			// this.getData()
			// this.init()
		},
		mounted() {
			// if (!this.hasLogin()) {
			// 	uni.navigateTo({
			// 		url: '../app/login/index'
			// 	})
			// }
			// this.init()
		},
		methods: {
			init() {
				// WxUser_info().then(res => {
				// 	this.userInfo = res.data
				// 	this.phone = res.data.phone
				// 	this.realName = res.data.nickname
				// 	this.rxzp = res.data.url + '?_t=' + new Date().getTime()
				// 	this.idCardNum = res.data.id
				// })
				this.$nextTick(() => {
					this.getData()
					account_info().then(res => {
						this.userInfo = this.$s.res(res)
					})
				})
			},
			getData() {
				this.loadStatus = "loading"
				trend_myself(this.params).then(res => {
					let data = this.$s.res(res).records
					if (data.length > 0) {
						if (this.params.pageNo == 1) {
							this.trendList = data
							console.log(this.trendList)
						} else {
							this.trendList = this.trendList.concat(data)
						}
						if (data.length < this.params.pageSize) {
							this.loadStatus = "noMore"
						} else {
							this.params.pageNo = this.params.pageNo + 1
							this.loadStatus = "more"
						}
					} else {
						this.loadStatus = "noMore"
					}
				}).catch(err => {
					this.loadStatus = "noMore"
				})
			},
			goDetail(e) {
				uni.navigateTo({
					url: "/pagesB/sns/trend/detail?id=" + e
				})
			},
			moreAction(e) {
				this.optionModal = true
				this.actionTrend = e
			},
			hideAction() {
				this.optionModal = false
			},
			onDelete() {
				uni.showModal({
					title: '提示',
					content: '确定要删除动态吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							trend_delete({
								trendId: this.actionTrend.id
							}).then(res => {
								this.getData()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

		text {
			opacity: 0.8;
		}

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.gif-wave {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			z-index: 99;
			mix-blend-mode: screen;
			height: 100rpx;
		}
	}

	.cu-modal .bottom-modal .trend-action {
		// border-top-left-radius: 16px;
		// border-top-right-radius: 16px;
		border-radius: 20rpx !important;
	}

	// .cu-card .dynamic .no-card .tag-top {
	// 	position: absolute;
	// 	right: 0;
	// 	top: 0;
	// }
</style>